<template>
  <div class="button-set-edit-box">
    <div class="header-box">
      <div class="header-title flex-1">{{ $t('setting.buttonSet.text2') }}</div>
      <div class="header-operation">
        <div class="add-btn" :class="[ banAddButton ? 'is-ban' : '']" @click="addNewButton">{{ $t('setting.buttonSet.btn1') }}{{ `（${btnList.length}/${normalBtnMixNumber}）` }}</div>
      </div>
    </div>

    <div class="btn-list-box" :class="[nowChooseEndItem ? 'is-focus' : '']">
      <div class="flex-x mar-b-8 tips-box" v-if="!btnList.length">
        <i class="iconfont icon-info-circle mar-r-8"></i>
        {{ $t('setting.buttonSet.text15') }}
      </div>
      <draggable class="edit-btn-box" tag="div" :list="btnList" :group="{ name: 'g1' }" handle=".handle">
        <button class="btn-item-box just-cur-point can-move handle" draggable="true" :class="[nowChooseEndItem === item.primaryKey ? 'is-focus' : '']" v-for="(item, index) in btnList" :key="index" @click="focusNow(item)">
          <div class="btn-item-operation" v-if="nowChooseEndItem === item.primaryKey">
              <div class="btn-item-operation-content overHideCon-1 flex-1">
                <span>{{ item.name }}</span>
              </div>
            <div class="mar-l-5 mar-r-4 split-line"></div>
            <i class="iconfont icon-delete font-12-i just-cur-point" @click="deleteBtn(index)"></i>
          </div>
          <el-button type="plain-third" class="btn-item-content overHideCon-1">{{ item.name }}</el-button>
        </button>
      </draggable>
      
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, watch, computed } from 'vue';
import Platform from '@src/util/platform';
import { t } from '@src/locales';
import { normalBtnMixNumber } from '@src/component/compomentV2/buttonSet/common';
import { ButtonSetDetailForShowPositionEnum, ButtonSetDetailForButtonStyleTypeEnum, ButtonSetDetailForButtonConcatEventEnum, ButtonSetDetailForButtonTypeEnum } from 'pub-bbx-global/pageType/dist/enum/ButtonSetEnum';
import { getCommonDefaultLangForKey } from '@hooks/useFormMultiLanguage';
import { randomString } from 'pub-bbx-utils';
import draggable from 'vuedraggable';
export default defineComponent({
  name: 'ButtonSetEdit',
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    nowFocusItem: {
      type: [Array, null],
      default: null,
    },
  },
  components:{
    draggable,
  },
  setup(props, { emit }) {
    const btnList = ref([]);

    const createBtnItem = () => {
      const id = randomString();
      return {
        primaryKey: id,
        name: t('common.paas.view.designer.workFlow.functionButton'),
        nameLanguage: getCommonDefaultLangForKey('common.paas.view.designer.workFlow.functionButton'),
        viewType: ButtonSetDetailForButtonStyleTypeEnum.Primary,
        role: [],
        position: [ButtonSetDetailForShowPositionEnum.PcDetail],
        event: [
          {
            type: '',
            execute: [],
          },
        ],
        pathId: [id], // 只用于前端组件
        type: ButtonSetDetailForButtonTypeEnum.Button,
        system: 0,
      };
    };

    const nowChooseEndItem = computed(() => {
      if (!props.nowFocusItem) return null;
      let index = props.nowFocusItem.length - 1;
      return props.nowFocusItem[index];
    });

    function addNewButton() {
      if (btnList.value.length >= normalBtnMixNumber) {
        return;
      }
      btnList.value.push(createBtnItem());
    }
    function focusNow(item) {
      emit('changeFocus', [item.primaryKey]);
    }
    function blurNow() {
      emit('changeFocus', null);
    }
    async function deleteBtn(index) {
      const res = await Platform.confirm(t('common.paas.view.designer.workFlow.tip1'));
      if (!res) return;
      btnList.value.splice(index, 1);
      blurNow();
    }

    function initBtnList(arr) {
      btnList.value = arr;
    }

    const banAddButton = computed(() => btnList.value.length >= normalBtnMixNumber);

    watch(
      () => btnList.value,
      () => {
        emit('update', btnList.value);
      },
      {
        deep: true,
      }
    );

    return {
      btnList,
      addNewButton,
      focusNow,
      deleteBtn,
      initBtnList,
      normalBtnMixNumber,
      blurNow,
      nowChooseEndItem,
      banAddButton,
    };
  },
});
</script>
<style lang="scss" scoped>
.button-set-edit-box {
  .header-box {
    background-color: rgba(#1989fa, 0.05);
    display: flex;
    align-items: center;
    padding: 12px;
    .header-title {
      color: #1989fa;
    }
    .add-btn {
      background-color: $color-primary;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
      color: #fff;
      min-width: 110px;
      cursor: pointer;
      &.is-ban{
        opacity: 0.5;
        cursor:no-drop;
      }
    }
  }
  .btn-list-box {
    margin-top: 12px;
    background-color: rgba(#1989fa, 0.05);
    padding: 16px 4px 4px 16px;
    display: flex;
    flex-wrap: wrap;
    border:1px dashed transparent;
    &.is-focus {
      border:1px dashed #1989FA;
    }
    .tips-box{
      color: $text-color-secondary;
    }
    .edit-btn-box{
        display: flex;
        align-items: flex-start;
        .el-button{
          min-height: 32px;
        }
      }
    .btn-item-box {
      max-width: 300px;
      // padding: 5px 12px;
      // border: 1px solid #CBD6E2;
      border:none;
      padding:0;
      margin-right: 12px;
      margin-bottom: 12px;
      position: relative;
      background-color: #fff;
      border-radius: 4px;
      
      &:hover{
        border-color: $color-primary;
      }
      &.is-focus {
        .el-button{
          border: 1px solid $color-primary;
          color: $color-primary;
          border-radius: 0;
          
        }

      }

      .btn-item-operation {
        background-color: $color-primary;
        position: absolute;
        display: flex;
        bottom: 100%;
        left: 0;
        align-items: center;
        color: #fff;
        padding: 2px 6px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        max-width: 300px;
        min-width: 100%;
        .btn-item-operation-content {
          font-size: 12px;
          word-break: keep-all;
        }
        .split-line {
          width: 1px;
          height: 12px;
          background-color: #fff;
        }
      }
    }
  }
}
</style>
